<template>
  <!-- 主应用容器 -->
  <div class="app-container">
    <!-- 页面标题和描述 -->
    <h1 class="app-title">Vue 2.0 广告位布局演示</h1>
    <p class="app-description">基于 JSON 配置的流式布局，支持不同栏数展示和拖拽排序功能</p>
    
    <!-- 组件切换按钮组：用于在前台展示版和后台拖拽管理版之间切换 -->
    <div class="view-switcher">
      <button 
        :class="['switch-btn', { active: currentView === 'normal' }]"
        @click="switchToView('normal')"
      >前台展示版</button>
      <button 
        :class="['switch-btn', { active: currentView === 'draggable' }]"
        @click="switchToView('draggable')"
      >后台管理拖拽布局</button>
      
      <a href="https://gitee.com/foge/adLayout.git" target="_blank" rel="noopener noreferrer" class="source-download-btn">下载源码</a>
    </div>
    
    <!-- 布局容器：根据当前视图类型动态渲染不同组件 -->
    <div class="layout-container">
      <!-- 前台展示版：纯展示模式 -->
      <AdLayout 
        v-if="currentView === 'normal'"
        :ad-items="adItems" 
      />
      <!-- 后台管理拖拽版：支持拖拽排序和实时更新 -->
      <DraggableAdLayout 
        v-else
        :ad-items="adItems"
        @update-adItems="handleAdItemsUpdate"
      />
    </div>
    
    <!-- JSON配置编辑器部分 -->
    <div class="config-section">
      <h2>JSON配置编辑器</h2>
      <p class="config-tip">您可以编辑下方 JSON 配置调整布局，或切换到可拖拽视图直接拖拽调整顺序。</p>
      
      <!-- 编辑器容器 -->
      <div class="editor-wrapper">
        <!-- JSON文本编辑区域 -->
        <textarea 
          v-model="jsonConfigText"
          class="json-editor"
          rows="15"
          placeholder="在此编辑JSON配置..."
          @input="handleJsonInput"
        ></textarea>
        <!-- 错误提示区域 -->
        <div v-if="jsonError" class="json-error">{{ jsonError }}</div>
        <!-- 成功提示区域 -->
        <div v-if="!jsonError" class="json-success">✓ JSON格式正确</div>
      </div>
      
      <!-- 编辑器操作按钮 -->
      <div class="editor-actions">
        <button @click="resetConfig" class="btn btn-secondary">重置配置</button>
        <button @click="formatJson" class="btn btn-secondary">格式化JSON</button>
      </div>
      
      <!-- 配置帮助说明 -->
      <div class="layout-help">
        <h3>配置说明：</h3>
        <ul>
          <li>直接编辑上方JSON文本，或拖拽广告位来调整顺序，布局将实时更新</li>
          <li>layoutType支持值: one-column(一栏), two-column(两栏), three-column(三栏)</li>
          <li>确保每个项目有唯一的id、title和layoutType属性</li>
          <li v-if="currentView === 'draggable'">拖拽提示: 点击右侧的 ⋮⋮ 图标或直接点击广告位进行拖拽排序</li>
          <li v-else>提示: 切换到可拖拽视图以获得更直观的排序体验</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 导入广告布局组件
import AdLayout from './components/AdLayout.vue'
// 导入可拖拽广告布局组件
import DraggableAdLayout from './components/DraggableAdLayout.vue'

export default {
  // 组件名称
  name: 'App',
  // 注册子组件
  components: {
    AdLayout,
    DraggableAdLayout
  },
  // 数据定义
  data() {
    return {
      // 当前使用的视图类型: 'normal'(前台展示) 或 'draggable'(后台拖拽)
      currentView: 'normal',
      // 广告位配置数据（核心数据，被各组件共享）
      adItems: [
        {
          id: 1, // 广告位唯一标识
          title: '广告位1', // 广告位标题
          layoutType: 'two-column' // 布局类型：两栏布局
        },
        {
          id: 2,
          title: '广告位2',
          layoutType: 'two-column'
        },
        {
          id: 3,
          title: '广告位3',
          layoutType: 'one-column' // 一栏布局
        },
        {
          id: 4,
          title: '广告位4',
          layoutType: 'three-column' // 三栏布局
        },
        {
          id: 5,
          title: '广告位5',
          layoutType: 'three-column'
        },
        {
          id: 6,
          title: '广告位6',
          layoutType: 'three-column'
        },
        {
          id: 7,
          title: '广告位7',
          layoutType: 'one-column'
        }
      ],
      // JSON配置文本：用于编辑器显示和编辑
      jsonConfigText: '',
      // JSON错误信息：用于显示解析错误
      jsonError: '',
      // 原始配置备份：用于重置功能
      originalConfig: []
    }
  },
  // 组件挂载后的初始化
  mounted() {
    // 初始化JSON文本（格式化输出便于阅读）
    this.jsonConfigText = JSON.stringify(this.adItems, null, 2)
    // 深拷贝原始配置用于重置
    this.originalConfig = JSON.parse(JSON.stringify(this.adItems))
  },
  // 方法定义
  methods: {
    /**
     * 更新广告位数据（处理拖拽排序后的数据更新）
     * @param {Array} newAdItems - 拖拽排序后的新广告位数组
     */
    handleAdItemsUpdate(newAdItems) {
      // 更新组件数据
      this.adItems = newAdItems
      // 同步更新JSON配置编辑器内容，保持双向数据一致
      this.jsonConfigText = JSON.stringify(this.adItems, null, 2)
      // 清除可能存在的错误信息
      this.jsonError = ''
    },
    
    /**
     * 切换视图类型
     * @param {string} viewType - 目标视图类型 ('normal' 或 'draggable')
     */
    switchToView(viewType) {
      this.currentView = viewType
    },
    
    /**
     * 处理JSON输入变化（当用户编辑JSON配置时触发）
     */
    handleJsonInput() {
      try {
        // 尝试解析JSON文本
        const parsedConfig = JSON.parse(this.jsonConfigText)
        
        // 验证配置格式是否为数组
        if (!Array.isArray(parsedConfig)) {
          throw new Error('配置必须是数组格式')
        }
        
        // 验证每个项目的必要字段和值的有效性
        const invalidItems = parsedConfig.filter(item => 
          !item.id || !item.title || !item.layoutType ||
          !['one-column', 'two-column', 'three-column'].includes(item.layoutType)
        )
        
        // 如果存在无效项目，抛出错误
        if (invalidItems.length > 0) {
          throw new Error(`发现${invalidItems.length}个无效项目，请检查id、title和layoutType字段`)
        }
        
        // 配置有效，更新广告位数据
        this.adItems = parsedConfig
        // 清除错误信息
        this.jsonError = ''
      } catch (error) {
        // 记录错误信息但不更新布局，保留用户的编辑内容
        this.jsonError = `JSON错误: ${error.message}`
      }
    },
    
    /**
     * 重置配置到初始状态
     */
    resetConfig() {
      // 深拷贝原始配置，避免引用问题
      this.adItems = JSON.parse(JSON.stringify(this.originalConfig))
      // 同步更新JSON编辑器内容
      this.jsonConfigText = JSON.stringify(this.adItems, null, 2)
      // 清除错误信息
      this.jsonError = ''
    },
    
    /**
     * 格式化JSON文本
     */
    formatJson() {
      try {
        // 尝试解析并重新格式化JSON
        const parsed = JSON.parse(this.jsonConfigText)
        this.jsonConfigText = JSON.stringify(parsed, null, 2)
        this.jsonError = ''
      } catch (error) {
        // 格式化失败时显示错误信息
        this.jsonError = `格式化失败: ${error.message}`
      }
    }
  }
}
</script>

<style>
/* 全局应用样式 */
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 标题样式 */
.app-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

/* 描述样式 */
.app-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
  text-align: center;
}

/* 视图切换器样式 */
.view-switcher {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  gap: 10px;
}

/* 切换按钮基础样式 */
.switch-btn {
  padding: 8px 20px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 切换按钮激活状态 */
.switch-btn.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

/* 切换按钮悬停效果 */
.switch-btn:hover {
  background-color: #e6f7ff;
  border-color: #409eff;
  color: #409eff;
}

/* 激活状态下的悬停效果 */
.switch-btn.active:hover {
  background-color: #66b1ff;
  color: white;
  border-color: #66b1ff;
}

/* 源码下载按钮样式 - 调整为更适合和按钮组在一起 */
.source-download-btn {
  display: inline-block;
  padding: 8px 20px;
  background-color: #0066cc;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 源码下载按钮悬停效果 */
.source-download-btn:hover {
  background-color: #004d99;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* 布局容器样式 */
.layout-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

/* 配置区域样式 */
.config-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 配置区域标题 */
.config-section h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
}

/* 编辑器容器 */
.editor-wrapper {
  margin-bottom: 15px;
  position: relative;
}

/* JSON编辑器样式 */
.json-editor {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  background-color: #fafafa;
  transition: border-color 0.3s ease;
}

/* JSON编辑器聚焦效果 */
.json-editor:focus {
  outline: none;
  border-color: #4CAF50;
  background-color: #fff;
}

/* JSON错误提示样式 */
.json-error {
  color: #f44336;
  font-size: 14px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #ffebee;
  border-radius: 4px;
  border-left: 4px solid #f44336;
}

/* JSON成功提示样式 */
.json-success {
  color: #4CAF50;
  font-size: 14px;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #e8f5e9;
  border-radius: 4px;
  border-left: 4px solid #4CAF50;
}

/* 编辑器操作按钮容器 */
.editor-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 按钮基础样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* 次要按钮样式 */
.btn-secondary {
  background-color: #6c757d;
  color: white;
}

/* 次要按钮悬停效果 */
.btn-secondary:hover {
  background-color: #5a6268;
}

/* 布局帮助说明样式 */
.layout-help {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

/* 帮助说明标题 */
.layout-help h3 {
  font-size: 16px;
  color: #495057;
  margin-bottom: 10px;
}

/* 帮助说明列表 */
.layout-help ul {
  margin: 0;
  padding-left: 20px;
}

/* 帮助说明列表项 */
.layout-help li {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }
  
  .editor-actions {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}
</style>
